<?php
@session_start();
if (!isset($_SESSION['id_user']))
	//header('Location://localhost/firstclassapartmentscordoba/panel_control/login.php');
	//header('Location:http://firstclassapartment.com.ar/panel_control/login.php');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Atenticaci&oacute;n | Panel de Control | First Class Apartments Cordoba Argentina">
		<meta name="author" content="Pulce Web Solutions - www.pulce.com.ar">
		<!--Para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos móviles-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="Departamento,Alquiler,Temporal,Cordoba,Capital,Argentina,First Class Apartments,Alojamiento,Turismo,Panel,Control,LogIn,Auenticaci&oacute;n">

		<title>Usuarios | Panel de Control | First Class Apartments C&oacute;rdoba Argentina</title>

		<link href="../css/jquery.dataTables.css" rel="stylesheet">
		<link href="../css/dataTables.responsive.css" rel="stylesheet">
		<?php
			include_once('../links.php');
			include_once('menu_bar.php');
		?>
		

		<!--JQUERY-->
		<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
		<!--BOOTSTRAP-->
		<script src="../js/bootstrap.min.js"></script>
		<!--CUSTOM JS-->
		<script src="../js/functions.js"></script>
		<!-- TOOLTIP -->
		<script src="../js/jquery.tooltipster.min.js"></script>
		<link href="../css/tooltipster.css" rel="stylesheet">
		<!-- DATATABLES -->
		<script src="../js/jquery.dataTables.js"></script>
		<!-- DATATABLES RESPONSIVE 
		<script src="../js/dataTables.responsive.js"></script>-->
		<!-- DATATABLES PLUGIN - DATE UK -->
		<script src="../js/date-uk.js"></script>
		<!-- DATATABLES PLUGIN - RELOAD AJAX -->
		<script src="../js/fnReloadAjax.js"></script>

		<script type="text/javascript">

		$(document).ready(function(){

			var accion='';

			$('#tabla').dataTable({
				"language": {"url": "../css/es_ES.txt"},
	    		"ajax": {
		            "url": "ajax_tabla_usuarios.php",
		            "dataSrc": "",
		            "data": function ( d ) {
       					 d.action = 'getUsuarios';
       				}
		        },
	        	"columns": [
	        		{ "data": "Usuario" },		            
		            { "data": "Nombre" },
		            { "data": "Apellido" },
		            { "data": "Alta" },
		            { "data": "Acceso" }
		        ],
		        "columnDefs": [
		        	{ 	"type": "date-uk", 
		        		"targets": 3
		        	},
		        	{ 	"type": "date-uk", 
		        		"targets": 4
		        	}
		        ]
			});

			function reload_usuario(){
				var table = $('#tabla').dataTable();
				table.fnReloadAjax();
			}

			function hideMsgModal(){
				if (isSet('msg-modal'))
					$('#msg-modal').fadeOut();
			}
			$('#modalUsuario').on('change',function(e){
				hideMsgModal();
			});

			$('#tabla tbody').on( 'click', 'tr', function () {
		        var trid = $(this).closest('tr').attr('Id');
		        hideMsgModal();
		        g("ajax_tabla_usuarios.php?"+a("getUsuario")+c('id',trid),'result-modal','div-msg','div-img',false);
		        $('#btn-modificar').show();
				$('#btn-eliminar').show();
				$('#div-reset').show();
				$('#btn-guardar').hide();
				$('#lblUsuario').text('Editar Usuario');
		        
		        $('#modalUsuario').modal('show');
		    } );

		    $('#btn-nuevo').on('click',function(e){
		    	hideMsgModal();
				$('#btn-modificar').hide();
				$('#btn-eliminar').hide();
				$('#div-reset').hide();
				$('#btn-guardar').show();
				$('#lblUsuario').text('Nuevo Usuario');
				limpiarDatos();
				
				$('#modalUsuario').modal('show');
			});

			$('#btn-modificar').on('click',function(e){
				g("ajax_tabla_usuarios.php?"+a("updUsuario")+v('usuario')+v('nombre')+v('apellido')+v('id_modal'),'','msg-modal','img-modal',false);
				reload_usuario();
			});

			$('#btn-eliminar').on('click',function(e){
				accion='del';
				$('#lblConfirmar').text('Confirmar Eliminar Usuario');
				$('#mensaje').text('¿Está seguro que desea eliminar el Usuario?');
				$('#modalConfirmacion').modal('show');
			});

			$('#btn-reiniciar').on('click',function(e){
				accion='res';
				$('#lblConfirmar').text('Confirmar Reiniciar Contraseña');
				$('#mensaje').text('¿Está seguro que desea Reiniciar la contraseña del usuario?');
				$('#modalConfirmacion').modal('show');
			});

			$('#btn-guardar').on('click',function(e){
				g("ajax_tabla_usuarios.php?"+a("newUsuario")+v('usuario')+v('nombre')+v('apellido'),'','msg-modal','img-modal',false);
				reload_usuario();
			});

			$('#btn-confirm-yes').on('click',function(e){
				if (accion == 'del'){
					g("ajax_tabla_usuarios.php?"+a("delUsuario")+v('id_modal'),'','msg-modal','img-modal',false);
					reload_usuario();}
				else{
					g("ajax_tabla_usuarios.php?"+a("resetClave")+v('id_modal'),'','msg-modal','img-modal',true);
				}
				$('#modalConfirmacion').modal('hide');
				if (accion == 'del')
					$('#modalUsuario').modal('hide');
			});

			$('#btn-salir').on('click',function(e){
				hideMsgModal();
			});

			$('.tooltip').tooltipster({
                contentAsHTML: true,
                animation: 'grow'
            });

    		$('#btn-menu').on('click',function(e){
				$(location).attr('href','./index.php');
			});

			function hideMsgModal(){
				if (isSet('msg-modal'))
					$('#msg-modal').fadeOut();
			}
			$('#modalUsuario').on('change',function(e){
				hideMsgModal();
			});

			function limpiarDatos(){
				$('#usuario').val('');
				$('#nombre').val('');
				$('#apellido').val('');
			}

		});


 	</script>

	</head>
	<body class="panel">
		<div class="container">
			<div class="box-central">
				<div class="row">
					<div class="col-xs-5">
						<h1>Usuarios</h1>
					</div>
					<div class="col-xs-2">
						<div id ="div-img">
						</div>
					</div>
					<div class="col-xs-4">
        				<button id="btn-nuevo" type="button" class="btn btn-info btn-custom" data-dismiss="modal">Nuevo Usuario</button>
        			</div>
				</div>
				<div class="row back-table margin-top-1em">
					<table id="tabla" class="display responsive nowrap">
						<thead>
				            <tr>
				                <th>Usuario</th>
				                <th>Nombre</th>
				                <th>Apellido</th>
				                <th>Fecha Alta</th>
				                <th>Ultimo Acceso</th>
				            </tr>
				        </thead>
					</table>
				</div>
				<div id="div-msg" class="margin-top-1em" style="display:none">
				</div>
				<div class="row margin-top-1em">
					<div class="col-xs-4 col-xs-offset-4">
						<button id="btn-menu" class="btn btn-lg btn-danger" style="width:90%">Volver al Men&uacute; Principal</button>
					</div>
				</div>
			</div>
			<div id="div-result">
			</div>
			<!-- Modal: Usuario -->
			<div id="modalUsuario" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-sm modal-dialog-alert">
			    	<div class="modal-content modal-content-alert">
			      		<div class="modal-header modal-header-alert">
			      			<div class="row">
			      				<div class="col-xs-5">
			        				<h2 class="modal-title" id="lblUsuario"></h2>
			        			</div>
			        			<div class="col-xs-2">
			        				<div id="img-modal"></div>
			        			</div>
			        		</div>
			       		</div>
			      		<div class="modal-body modal-body-alert">
			      			<div class="row margin-top-1em">
			      				<label class="col-xs-2 col-xs-offset-2 control-label label-custom">Usuario:</label>
								<div class="col-xs-8">
									<input type="text" id="usuario"/>
								</div>
			      			</div>
			      			<div class="row">
			      				<label class="col-xs-2 col-xs-offset-2 control-label label-custom">Nombre:</label>
								<div class="col-xs-8">
									<input type="text" id="nombre"/>
								</div>
			      			</div>
			      			
			      			<div class="row">
			      				<label class="col-xs-2 col-xs-offset-2 control-label label-custom">Apellido:</label>
								<div class="col-xs-8">
									<input type="text" style="" id="apellido"/>
								</div>
			      			</div>
			      			<div id="div-reset" class="row" style="text-align: center;">
			      				<button id="btn-reiniciar" type="button" class="btn btn-sm btn-default">Reiniciar Contrase&ntilde;a</button>
			      				<img src="../img/symbol/help.png" style="cursor:pointer;display: inline;" title="Al Reiniciar la contrase&ntilde;a del usuario la nueva ser&aacute; 'firstclass'. El sistema solicitar&aacute; se la modifique en el pr&oacute;ximo ingreso" class="tooltip"/>
			      			</div>
			      			<input type="hidden" id="id_modal"/>
						</div>
						<div class="modal-footer modal-footer-alert">
							<button id="btn-guardar" type="button" class="btn btn-success btn-custom">Guardar</button>
					    	<button id="btn-modificar" type="button" class="btn btn-success btn-custom">Modificar</button>
					    	<button id="btn-eliminar" type="button" class="btn btn-danger btn-custom">Eliminar</button>
					        <button id="btn-salir" type="button" class="btn btn-info btn-custom" data-dismiss="modal">Salir</button>
					    </div>
					    <div id="msg-modal">
						</div>
					    <div id="result-modal">
						</div>
			      	</div>
			    </div>
			</div>
			<!-- Modal: Confimacion Delete-->
			<div id="modalConfirmacion" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-sm modal-dialog-alert">
			    	<div class="modal-content modal-content-alert">
			      		<div class="modal-header modal-header-alert">
			        		<h2 class="modal-title" id="lblConfirmar"></h2>
			       		</div>
			      		<div class="modal-body modal-body-alert">
			      			<p id="mensaje"></p>
						</div>
						<div class="modal-footer modal-footer-alert">
					    	<button id="btn-confirm-yes" type="button" class="btn btn-danger btn-custom">Si</button>
					        <button type="button" class="btn btn-info btn-custom" data-dismiss="modal">No</button>
					    </div>
			      	</div>
			    </div>
			</div>
		</div>
	</body>
</html>